import React, { useState, useEffect } from 'react';
import PanelListTotal from '@/components/PanelListTotal';
import { t } from '@lingui/macro';
import Styles from './TopList.module.scss';
import { Box, DatePicker2 } from '@alifd/next';
import { useHistory } from 'react-router-dom';
import { useStore } from '@/hooks';
import moment from 'moment';
import dayjs from 'dayjs';

const RangePreset = {};
RangePreset[t`昨日`] = [dayjs().subtract(1, 'day'), dayjs()];
RangePreset[t`近一周`] = [dayjs().add(-7, 'day'), dayjs()];
RangePreset[t`近二周`] = [dayjs().add(-15, 'day'), dayjs()];

const TopList = () => {
  const [leftData, setLeftData] = useState([]);
  const [rightData, setRightData] = useState([]);
  const { dashboardStore: store, ruleStore, memberStore } = useStore();
  const history = useHistory();
  const [date, setDate] = useState([moment().subtract(6, 'day').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);

  useEffect(() => {
    (async () => {
      const [start, end] = date;
      const fromTime = start || '';
      const toTime = end || '';
      const res = await store.memberCount({ groupIds: [ruleStore._group_id] });
      const points = await store.pointTrade({ groupId: ruleStore._group_id, fromTime, toTime });
      const { orderPoints, tradePoints, transferPointsIn, transferPointsOut } = points || {};
      const left = [
        { title: t`总人数`, value: res[0], UC: null, backgroundColor: '#04BE02' },
        { title: t`未激活`, value: res[1], UC: null },
        { title: t`已启用`, value: res[2], UC: null },
        { title: t`已停用`, value: res[3], UC: null },
        { title: t`待审核`, value: res[4], UC: null },
      ];
      const right = [
        { title: t`订单积分`, value: orderPoints, UC: null, backgroundColor: '#3FB837' },
        { title: t`买卖积分`, value: tradePoints, UC: null },
        { title: t`迁移积分`, value: <div><span className={Styles.title_text}>{'入'}</span><span className={Styles.title_value}>{transferPointsIn}</span> <span className={Styles.title_text} >{'出'}</span><span className={Styles.title_value}>{transferPointsOut}</span></div>, UC: null },
      ];
      setLeftData(left);
      setRightData(right);
    })();
  }, [ruleStore._group_id, date]);

  /**
   * 选择时间范围事件
   * @param {*} e
   * @param {*} v
   */
  const handleOnDate = (e, v) => {
    setDate(v);
  };

  const handleOnLinkTo = (i) => {
    memberStore.table_Status = store._member_menu[i];
    memberStore._tableStatus = store._member_menu[i];
    history.push('/member');
  };

  return (
    <>
      <Box direction="row" wrap={!!ruleStore._isPhone} >
        <Box style={{ padding: '20px' }}>
          <div className={Styles.top_title}>
            <span>{t`成员人数汇总：`}</span>
          </div>
          <PanelListTotal data={leftData} width={ruleStore._isPhone ? '82vw' : '40vw'} onClick={handleOnLinkTo} />
        </Box>

        {!ruleStore._isPhone && <div className={Styles.borderTop} />}

        <Box wrap={!!ruleStore._isPhone} style={{ padding: '20px' }}>
          <Box direction="row" wrap={!!ruleStore._isPhone} >
            <div className={Styles.top_title}>{t`积分变动情况:`}</div>
            <DatePicker2.RangePicker
              style={{ width: 100, marginLeft: ruleStore._isPhone ? 10 : 20, marginTop: -5 }}
              onChange={handleOnDate}
              preset={RangePreset}
              value={date}
            />
          </Box>
          <PanelListTotal data={rightData} width={ruleStore._isPhone ? '82vw' : '40vw'} />
        </Box>
      </Box>
    </>
  );
};

export default TopList;
